<template>
  <div class="bt822a">
    <van-tabs v-model:active="active" :lazy-render="false" title-active-color="#0067D1" title-inactive-color="#5C6976">
      <van-tab title="全部用车">
        <div class="content">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="~没有更多了~" @load="onLoad">
              <div v-for="(two, idx) in data" :key="idx">
                <div class="box-card">
                  <div class="box-card-head">
                    <span>标题区域: {{ idx }}</span>
                  </div>
                  <div class="box-card-item">
                    <span>内容区域: {{ idx }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
      <van-tab title="按次用车"><span>按次用车</span></van-tab>
      <van-tab title="按月用车"><span>按月用车</span></van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import { pageProductApi } from "@/api/product/index.ts";

// 标题属性
const active = ref(0);
// 当前参数
const params = ref({});
// 当前页码
const curPage = ref({
  pageSize: 10,
  currentPage: 1,
});
// 刷新状态
const refreshing = ref(false);
// 加载状态
const loading = ref(false);
// 完成状态
const finished = ref(false);
// 累计次数
const count = ref(1);
// 列表数据
const data = ref([]);

// 下拉之刷新
const onRefresh = () => {
  // 下拉刷新之前重置列表懒加载完成状态
  finished.value = false;
  count.value = 1;
  data.value = [];
  loading.value = true;
  console.log("[01].下拉刷新之列表懒加载完成状态:", finished.value);
  console.log("[02].下拉刷新之累计次数:", count.value);
  console.log("[03].下拉刷新之列表数据:", data.value);
  console.log("[04].下拉刷新之加载状态:", loading.value);
  setTimeout(() => {
    onLoad();
  }, 1000);
};

// 列表懒加载
const onLoad = () => {
  // 列表懒加载之前重置下拉刷新状态
  refreshing.value = false;
  // 停止刷新
  curPage.value.currentPage = count.value;
  console.log("[01].列表懒加载之列表懒加载完成状态:", finished.value);
  console.log("[02].列表懒加载之累计次数:", count.value);
  console.log("[03].列表懒加载之列表数据:", data.value);
  console.log("[04].列表懒加载之加载状态:", loading.value);
  console.log("[05].列表懒加载之刷新状态:", refreshing.value);
  console.log("[06].列表懒加载之当前页码:", curPage.value.currentPage);
  setTimeout(() => {
    getPageList();
  }, 1000);
};

// 列表之接口
const getPageList = () => {
  console.log("[07].查询数据接口查询参数:", curPage.value);
  pageProductApi({ currentPage: curPage.value.currentPage, pageSize: curPage.value.pageSize })
    .then((res) => {
      console.log("pageProductApi res:", res);
      if (res.code === 200) {
        data.value.push(...res.data.records);
        count.value = Number(count.value) + 1;
        // 数据全部加载完成
        if (res.data.records.length === 0) {
          finished.value = true;
        }
        showToast("query successful");
      } else {
        finished.value = true;
        showToast("query failed");
      }
    })
    .catch((err) => {
      finished.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style scoped lang="scss">
.bt822a {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: auto;
    background-color: #f8f8f8;
    .box-card {
      width: 330px;
      margin: 10px auto;
      border-radius: 8px;
      background-color: #e6e6e6;
      .box-card-head {
        width: 100%;
        height: 46px;
        background-color: #c4c4c4;
      }
      .box-card-item {
        width: 100%;
        height: 60px;
        background-color: #a2a2a2;
      }
    }
  }
}
</style>
